/*股票主界面页 path: '/stockmain'  */
<template>
  <div id="stock-main" class="stock-main common-stock-trade">
    <header-account-top :tab="0"></header-account-top>
    <div class="stock-top-blank"></div>
    <div class="stock-main-overview">
      <stock-account-over :userCode="userCode"></stock-account-over>
      <div class="to-selfaccount" @click.stop.prevent="toSelfAccount">个人账户总览</div>
      <div class="to-stockbase" @click.stop.prevent="tostockBase">炒股基础<i class="iconfont icon-xiangyou"></i></div>
    </div>
    <img src="~assets/images/trade/monijiaoyi.png" class="stock-shuiyin">
    <div class="stock-main-middle">
      <div class="stock-menu">
        <div v-for="(item,index) in menus" class="stock-menu-item" :class="{'xie':item.name==0}"
             @click.stop.prevent="clickMenu(item)">
          <div class="stock-menu-img" :style="{'background-image':'url('+item.imgUrl+')'}"></div>
          <div class="stock-menu-name">{{item.name}}</div>
        </div>
      </div>
      <div class="stock-to-real" @click.stop.prevent="toReal">
        <div class="content">跳转真实账户<i class="iconfont icon-xiangyou"></i></div>
      </div>
    </div>
    <div class="stock-main-blank"></div>
    <div class="stock-main-bottom">
      <div class="one"><i class="iconfont icon-changneijijin"></i><span>场内基金</span><img class="img-new" src="~assets/images/trade/new.png"></div>
      <div class="two">敬请期待<i class="iconfont icon-xiangyou"></i></div>
    </div>
    <trade-to-real-modal></trade-to-real-modal>
  </div>
</template>

<script>
  import Constant from 'common/constant'
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import HeaderAccountTop from 'components/selfaccount/HeaderAccountTop'
  import StockAccountOver from 'components/selfaccount/StockAccountOver'
  import TradeToRealModal from 'components/modal/TradeToRealModal'

  export default {
    data () {
      return {
        menus: [
          {imgUrl: require('assets/images/trade/mairu@2x.png'), name: '买入', path: '/trade/buyin'},
          {imgUrl: require('assets/images/trade/maichu@2x.png'), name: '卖出', path: '/trade/sellout'},
          {imgUrl: require('assets/images/trade/chedan@2x.png'), name: '撤单', path: '/trade/cancel?checkStatus=2'},
          {imgUrl: require('assets/images/trade/jijinchicang@2x.png'), name: '持仓', path: '/trade/stock'},
          {imgUrl: require('assets/images/trade/weituochaxun@2x.png'), name: '委托查询', path: '/trade/cancel'},
          {imgUrl: require('assets/images/trade/chuangjianzuhe@2x.png'), name: '创建组合', path: '/buildgroup/buildstep1'},
        ],
        userCode: LocalDAO.getUserCode(),
        marketBalance: '--',//普通交易总市值
        enableBalance: '--',
        totalFloatprofit: '--',
        dayRate: '--'
      }
    },
    components: {
      HeaderAccountTop,
      StockAccountOver,
      TradeToRealModal
    },
    methods: {
      clickMenu(item){
        if (item.name != 0) {
          this.$router.push({path: item.path})
        }
        let eventId = ''
        switch (item.name) {
          case '买入' : eventId = '20003'; break;
          case '卖出' : eventId = '20005'; break;
          case '撤单' : eventId = '20007'; break;
          case '持仓' : eventId = '20010'; break;
          case '委托查询' : eventId = '20013'; break;
          case '创建组合' : eventId = '20014'; break;
        }
        if(eventId !== ''){
          this.maidian(eventId)
        }
      },
      toReal(){
        this.maidian("20015")
        this.$store.dispatch('setModal', { visible: true, modalId: 'tradeToRealModal', stockCode: '', marketCd:'', tradeType: 'buy' })
      },
      toSelfAccount(){
        this.maidian("20001")
        this.$router.push({path: '/selfaccount'})
      },
      tostockBase(){
        this.maidian("20002")
        this.$router.push({path: '/stockbase'})
      },
      maidian (eventId) {
        let kv = {"usercode": this.userCode}
        TDAPP.onEvent(eventId, "", kv);
        TDAPP.send()
      }
    }
  }
</script>

<style scoped>
  .stock-main {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
  }
   .stock-top-blank{
     background: #EC4F4F;
     width: 100%;
     height: 44px;
     position: fixed;
     top:0
   }
  .stock-main-overview {
    width: 100%;
    background: #EC4F4F;
    display: inline-block;
  }

  .stock-main-overview .to-selfaccount {
    width: 5.6rem;
    height: 1.45rem;
    line-height: 1.35rem;
    font-size: 0.6rem;
    border: 0.05rem solid #FFFFFF;
    background-color: RGBA(205, 238, 255, 0.15);
    border-radius: 0.7rem;
    float: left;
    text-align: center;
    margin: 0.45rem 0 1rem 5.066%;
    color:#FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .stock-main-overview .to-stockbase {
    display: inline-block;
    color: #FFFFFF;
    height: 1.45rem;
    font-size: 0.6rem;
    line-height: 1.35rem;
    float: right;
    margin: 0.45rem 0 1rem;
    margin-right: 1.2rem;
  }

  .stock-main-middle{
    width: 100%;
  }
  .stock-menu {
    display: inline-block;
    width: 86.4%;
    margin: 1.8rem 6.8% 1.7rem;
  }

  .stock-menu .stock-menu-item {
    width: 33%;
    height: 5rem;
    display: inline-block;
    text-align: center;
    font-size: 0.6rem;
    color: #6b6b6b;
  }

  .stock-menu .stock-menu-item.xie {
    background-image: url('~assets/images/trade/weishiyong.png');
    background-repeat: repeat-x;
    background-size: cover;
    color: #FFFFFF;
  }

  .stock-menu .stock-menu-item .stock-menu-img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    width: 100%;
    height: 3.5rem;
  }

  .stock-menu .stock-menu-item:nth-child(1) .stock-menu-img {
    background-size: 50%;
  }

  .stock-menu .stock-menu-item:nth-child(2) .stock-menu-img {
    background-size: 48%;
  }

  .stock-menu .stock-menu-item:nth-child(6) .stock-menu-img {
    background-size: 35%;
  }

  .stock-menu .stock-menu-item:nth-child(2), .stock-menu .stock-menu-item:nth-child(8) {
    border-left: 0.05rem solid rgba(209, 222, 235, 0.45);
    border-right: 0.05rem solid rgba(209, 222, 235, 0.45);
  }

  .stock-menu .stock-menu-item:nth-child(4), .stock-menu .stock-menu-item:nth-child(6) {
    border-top: 0.05rem solid rgba(209, 222, 235, 0.45);
  }

  .stock-menu .stock-menu-item:nth-child(5) {
    border: 0.05rem solid rgba(209, 222, 235, 0.45);
    border-bottom: none;
  }

  .stock-to-real {
    width: 100%;
    text-align: center;
    font-size: 0.6rem;
    color: #3D90CD;
    padding-bottom: 1rem;
  }

  .stock-to-real .content {
    display: inline-block;
  }

  .stock-shuiyin {
    position: fixed;
    top: 19px;
    right: 0;
    z-index: 999;
  }
  .stock-main-bottom{
    width: 100%;
    height: 2.8rem;
    line-height: 2.5rem;
    font-size: 0.7rem;
  }
  .stock-main-bottom i{
    font-size: 0.8rem;
  }
  .stock-main-bottom >div{
    width:50%;
    display: inline-block;
    float: left;
  }
  .stock-main-bottom .one{
    padding-left: 1.2rem;
  }
  .stock-main-bottom .one i{
    color:#48BBF5
  }
  .stock-main-bottom .one span{
    margin: 0 0.36rem;
  }
  .stock-main-bottom .two{
    padding-right: 1rem;
    text-align: right;
    color: #999999;
  }
  .stock-main-bottom .two i{
    font-size: 0.8rem;
  }
  .stock-main-blank{
    width: 100%;
    height: 0.4rem;
    background: #F2F2F2;;
  }
  .img-new{
    margin-bottom: 2px;
  }

  @media (max-height: 600px) {
    .stock-menu .stock-menu-item {
      height: 4.75rem;
    }
  }

  @media (max-height: 580px) {
    .stock-menu{
      margin: 1.6rem 6.8% 1.4rem;
    }
    .stock-to-real{
      padding-bottom: 0.8rem;
    }
  }

</style>
